<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../static/plugins/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <script src="../static/plugins/layui/layui.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div>
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">塑唐(sootang)</li>
                <li>cospa/i-bloom</li>
                <li>excel表格图片导出</li>
                <li>bc-online</li>
            </ul>
            <div class="layui-tab-content" style="height: 100%;">
                <!-- ***渠道批发商城*** -->
                <div class="layui-tab-item layui-show">
                    <div class="form-container sootang">
                        <form class="layui-form">
                            <!-- <h2>sootang网站图片抓取</h2> -->
                            <p>https://pf.sootang.com/shopList?launchOrder=desc&cutOffOrder= &nbsp&nbsp&nbsp&nbsp 等待时间2s左右</p>
                            <div class="layui-form-item barcode">
                                <label class="layui-form-label">输入条形码</label>
                                <div class="layui-input-block">
                                    <textarea name="barcode" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </div>
                                <!-- <div class="layui-input-block">
                                    <input type="textarea" name="barcode" placeholder="请输入条形码" autocomplete="off" class="layui-input" lay-verify="required">
                                </div> -->
                            </div>
                            <div class="layui-form-item stop_date">
                                <label class="layui-form-label">截单日期</label>
                                <div class="layui-inline">
                                    <input type="text" class="layui-input" name="date" id="stop_date" placeholder="请选择截单日期" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item operate-submit">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="sootang">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- ***cospa-website and i-bloom*** -->
                <div class="layui-tab-item cospa-website">
                    <form class="layui-form">
                        <p>https://www.cospa.com/ 测试条形码:4549970356992 4549970376563 &nbsp&nbsp等待时间大概15s左右</p>
                        <p>https://i-bloom.shop/ 测试条形码:000-24294 000-24160 &nbsp&nbsp 等待时间大概20s左右</p>
                        <div class="layui-form-item barcode">
                            <label class="layui-form-label">选择类型</label>
                            <div class="layui-input-block">
                                <select name="type" lay-verify="required">
                                    <option value=""></option>
                                    <option value="1">cospa</option>
                                    <option value="2">i-bloom</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item ">
                            <label class="layui-form-label">输入条形码</label>
                            <div class="layui-input-block">
                                <input type="text" name="barcode" placeholder="请输入条形码" autocomplete="off" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item operate-submit">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="cospa">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- ***excel表格导入*** -->
                <div class="layui-tab-item excel-type">
                    <div class="excel-type">
                        <div class="step1">
                            <p>流程：1-先导入表格，表格导入成功后点击下载</p>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="uploadExcel">上传Excel文件</button>
                                <div class="layui-upload-list">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>
                        <div class="step2">
                            <p>流程：2-点击导出按钮，下载zip文件</p>
                            <div class="layui-upload">
                                <button type="button" class="layui-btn excel_download">导出excel图片数据</button>
                                <input type="hidden" name="excel_sheet_data">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="form-container sootang">
                        <form class="layui-form">
                            <!-- <h2>sootang网站图片抓取</h2> -->
                            <p>测试地址：https://bc-onlinestore.com/c/corabo/corabo_HQ/corabo_HQ_CB/corabo_HQ_CB_fukurodani/4580689592585</p>
                            <p>测试地址：https://bc-onlinestore.com/c/corabo/corabo_HQ/corabo_HQ_CB/corabo_HQ_CB_s_k_d/4580689592769</p>
                            <div class="layui-form-item barcode">
                                <label class="layui-form-label">输入地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="url" placeholder="请输入链接地址" autocomplete="off" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item operate-submit">
                                <div class="layui-input-block">
                                    <button class="layui-btn bc-online" lay-submit lay-filter="bc-online">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
layui.use('form', function() {
    var form = layui.form;
    form.on('submit(sootang)', function(data) {
        var timeStamp = new Date(data.field.date).getTime()
        data.field.cutOffTimeEnd = timeStamp
        $.ajax({
            type: 'POST',
            url: '/getData',
            async: false,
            contentType: 'application/json', // 如果你发送的是JSON数据
            data: JSON.stringify(data.field),
            success: function(data, textStatus, response) {
                if (response.status == 200) {
                    var data = data.data;
                    result = data.result;
                    console.log(data, result)
                    if (result.length > 0) {
                        layui.use('layer', function() {
                            var layer = layui.layer;
                            layer.msg("正在下载中", { icon: 1 }, 1000);
                        });
                    }
                    for (var i = result.length - 1; i >= 0; i--) {
                        // "/download/" + filenameArr[i] + "?date=" + data['date']
                        downloadImage("/download/" + result[i]['fileName'] + "?date=" + data['date'], result[i]['fileName'])
                    }
                }
            },
            error: function(jqXHR, textStatus) {
                console.log("请求失败，请稍后重试!");
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});

function downloadImage(url,fileName){
    fetch(url).then(res => {
        return res.blob();
        //return res.arrayBuffer();
    }).then(res => {
        let type = "image/*"  // 资源类型
        /* 常见资源类型
          1.excel: type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          2.图片: type = "image/*"
          3.视频: type = "video/*"
          4.音频: type = "audio/*"
        */
        // blob或arrayBuffer，二者转换为blob的方式一样
        let blob = new Blob([res], {type: type});
        // 获取的blob根据实际业务场景应用下载，或转化成其他格式的资源
        downloadBlob(blob,fileName);
    })
}
function downloadBlob(blob, fileName){
    const a = document.createElement('a');
    a.download = fileName;
    a.style.display = 'none';
    a.href = URL.createObjectURL(blob);
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(a.href);
    document.body.removeChild(a);
}

layui.use('form', function() {
    var form = layui.form;
    form.on('submit(cospa)', function(data) {
        // console.log(data); return false;
        var type = data.field.type
        $.ajax({
            type: 'POST',
            url: '/getCospaData',
            async: false,
            contentType: 'application/json', // 如果你发送的是JSON数据
            data: JSON.stringify(data.field),
            success: function(data, textStatus, response) {
                if (response.status == 200) {
                    var data = data.data;
                    layer.msg("正在下载中", { icon: 1 }, 1000);
                    window.location = "/downloadzip/" + data.barcode + "?date=" + data.date + "&type=" + type
                }
            },
            error: function(jqXHR, textStatus) {
                console.log("请求失败，请稍后重试!");
            }
        })
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});

layui.use('laydate', function() {
    var laydate = layui.laydate;

    //执行一个laydate实例
    laydate.render({
        elem: '#stop_date' //指定元素
    });
});
layui.use('element', function() {
    var element = layui.element;
});

// excel文件上传
layui.use('upload', function() {
    var upload = layui.upload;

    //执行实例
    var uploadInst = upload.render({
        elem: '#uploadExcel', //绑定元素
        url: '/upload/excel', //上传接口
        accept: 'file',
        done: function(res) {
            //上传完毕回调
            if (res.code == 200) {
                console.log(res, res.data)
                layer.msg("上传成功", { icon: 1 }, 1000);
                let data = res.data;
                let detail = data.detail;
                var str = ''
                for (let i in detail) {
                    str += '<p> ' + detail[i]['sheetname'] + ': 数据行数：' + detail[i]['total_num'] + '</p>'
                }

                layer.open({
                    type: 1,
                    title: "提示",
                    content: str
                });
                // $(".excel_download").removeClass("layui-btn-disabled");
                // $("#uploadExcel").addClass("layui-btn-disabled");
                $('input[name="excel_sheet_data"]').val(data.totals);
            } else {
                layer.msg("上传失败", { icon: 2 }, 1000);
            }
        },

        error: function() {
            layer.msg('上传出错');
        }
    });
});

layui.use('form', function() {
    var form = layui.form;
    form.on('submit(bc-online)', function(data) {
        let url = data.field.url
        window.location = "/getBconlineData?url=" + url
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
});
</script>
<script type="text/javascript">
$(function() {
    $(".excel_download").click(function() {
        let every_sheet_data = $('input[name="excel_sheet_data"]').val();
        if (every_sheet_data) {
            $(".excel_download").addClass("layui-btn-disabled");
            window.location = "/getExcelData?every_sheet=" + every_sheet_data
        } else {
            layer.msg('数据出错');
        }
    });
})
</script>

</html>